<template>
  <section>
    <!--卡牌1-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">Job Overview</span>
      </div>
      <div>
        <!--<div v-for="item in infoAs" class="text item ">
          <div style="text-align: right; " class="one">{{item.name + ' : '}}</div>
          <div class="one">{{item.val}}</div>
        </div>-->
        <el-row>
          <el-col :span="12">
            <div class="right">Job Name :&nbsp;&nbsp;</div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.name}}</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="right">User Name :&nbsp;&nbsp;</div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.user}}</div>
          </el-col>
        </el-row>

        <el-row v-if="state!='RUNNING'">
          <el-col :span="12">
            <div class="right">Queue :&nbsp;&nbsp;</div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.queue}}</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="right">State :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.state}}</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="right">Uberized :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.uberized}}</div>
          </el-col>
        </el-row>

        <el-row v-if="state!='RUNNING'">
          <el-col :span="12">
            <div class="right">Submitted :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.submitTime | toTimeStr}}</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <div class="right">Started :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.startTime | toTimeStr }}</div>
          </el-col>
        </el-row>

        <el-row v-if="state!='RUNNING'">
          <el-col :span="12">
            <div class="right">Finished :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.finishTime | toTimeStr }}</div>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="12">
            <div class="right">Elapsed :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.startTime | getTimex(job.finishTime)}}</div>
          </el-col>
        </el-row>

        <el-row v-if="state!='RUNNING'">
          <el-col :span="12">
            <div class="right">Diagnostics :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.diagnostics}}</div>
          </el-col>
        </el-row>

        <el-row v-if="state!='RUNNING'">
          <el-col :span="12">
            <div class="right">Average Map Time :&nbsp;&nbsp; </div>
          </el-col>
          <el-col :span="12">
            <div class="">{{job.avgMapTime | toSec }}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!--表2-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">ApplicationMaster</span>
      </div>
      <!--列表-->
      <el-table
        v-loading="listLoading"
        :data="jobAttempts"
        border
        stripe
        style="width: 100%">
        <el-table-column v-for="item in tableInfoTile"
                         :prop="item.key"
                         :label="item.name">
        </el-table-column>
        <el-table-column label="Logs">
          <template scope="scope">
            <router-link v-if="state!='RUNNING'" :to="{ path: `/page3362` ,query:{'uri' : `${scope.row.logsLink}`}}">logs</router-link>
            <router-link v-else :to="{ path: `/page3361` ,query:{'uri' : `${scope.row.logsLink}`,node:`${scope.row.nodeHttpAddress}`}}">logs</router-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--工具条-->
    <!--<el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.user" placeholder="姓名"></el-input>
        </el-form-item>

      </el-form>
    </el-col>-->

    <!--列表1-->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column label="Task Type">
        <template scope="scope">
          <router-link
            :to="{path : `${toPage}`, query:{application_id:`${application_id}`,job_id:`${job.id}`,type:`${scope.row.type}`,user:`${job.user}`}}">
            {{scope.row.type}}
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        v-if="state=='RUNNING'"
        prop="progress"
        label="Progress">
        <template scope="scope">
          <el-progress :text-inside="true" :stroke-width="18" :percentage="toFloat2(scope.row.progress)"></el-progress>
        </template>
      </el-table-column>

      <el-table-column
        prop="total"
        label="Total">
      </el-table-column>

      <el-table-column
        prop="complete"
        label="Complete">
      </el-table-column>
    </el-table>

    <!--列表2-->
    <el-table
      v-loading="listLoading"
      :data="tableData2"
      border
      stripe
      style="width: 100%">
      <el-table-column label="Attempt Type" prop="type">
      </el-table-column>

      <el-table-column
        v-if="state=='RUNNING'"
        prop="newkey"
        label="New">
        <template scope="scope">
          <router-link v-if="scope.row.newkey!=0"
                       :to="{path : `${toPage}`, query:{application_id:`${application_id}`,job_id:`${job.id}`,type:`${scope.row.type}`,state:`NEW`,user:`${job.user}`}}">
            {{scope.row.newkey}}
          </router-link>
          <span v-else>{{scope.row.newkey}}</span>
        </template>
      </el-table-column>

      <el-table-column
        v-if="state=='RUNNING'"
        prop="running"
        label="Running">
        <template scope="scope">
          <router-link v-if="scope.row.running!=0"
                       :to="{path : `${toPage}`, query:{application_id:`${application_id}`,job_id:`${job.id}`,type:`${scope.row.type}`,state:`RUNNING`,user:`${job.user}`}}">
            {{scope.row.running}}
          </router-link>
          <span v-else>{{scope.row.running}}</span>
        </template>
      </el-table-column>


      <el-table-column
        prop="failed"
        label="Failed">
        <template scope="scope">
          <router-link v-if="scope.row.failed!=0"
                       :to="{path : `${toPage}`, query:{application_id:`${application_id}`,job_id:`${job.id}`,type:`${scope.row.type}`,state:`FAILED`,user:`${job.user}`}}">
            {{scope.row.failed}}
          </router-link>
          <span v-else>{{scope.row.failed}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="killed"
        label="Killed">
        <template scope="scope">
          <router-link v-if="scope.row.killed!=0"
                       :to="{path : `${toPage}`, query:{application_id:`${application_id}`,job_id:`${job.id}`,type:`${scope.row.type}`,state:`KILLED`,user:`${job.user}`}}">
            {{scope.row.killed}}
          </router-link>
          <span v-else>{{scope.row.killed}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="successful"
        label="Successful">
        <template scope="scope">
          <router-link v-if="scope.row.successful!=0"
                       :to="{path : `${toPage}`, query:{application_id:`${application_id}`,job_id:`${job.id}`,type:`${scope.row.type}`,state:`SUCCEEDED`,user:`${job.user}`}}">
            {{scope.row.successful}}
          </router-link>
          <span v-else>{{scope.row.successful}}</span>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <!--<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination :current-page="1" :page-sizes="[5, 10, 20, 50]" :page-size="20" layout="total, sizes, prev, pager, next, jumper"
                     :total="400" style="float:right">
      </el-pagination>
    </el-col>-->

    <!--编辑界面-->
    <el-dialog :title="formTitle" v-model="logs">
      <pre>
          webpack: wait until bundle finished: /index.html
          webpack built 1637733327a6a4fdb3ca in 11626ms
          Hash: 1637733327a6a4fdb3ca
          Version: webpack 1.14.0

          webpack: wait until bundle finished: /index.html
          webpack built 1637733327a6a4fdb3ca in 11626ms
          Hash: 1637733327a6a4fdb3ca
          Version: webpack 1.14.0
      </pre>
    </el-dialog>
  </section>
</template>

<script>
  import util from '../../common/util'
  import dao from '../../common/dao'

  export default {
    data() {
      return {
        query: {},
        job: {},
        application_id: '',
        jobAttempts: [],
        tableInfoTile: [{
          key: "id",
          name: "Attempt Number"
        }, {
          key: "startTime",
          name: "Start Time"
        }, {
          key: "nodeHttpAddress",
          name: "Node"
        },],
        tableInfoData: [],
        logs: false,
        formInline: {user: ''},
        tableData: [],
        tableData2: [],
        state: '',
        toPage:'page334',
      }
    },
    methods: {
      getApplicationMaster(results = {}){
        this.jobAttempts = results.jobAttempts || [];
      },
      toFloat2(val){
        if(!val) return 0;
        return  parseFloat(val.toFixed(2))
      },
      getTableData(results = {}){
        let job;
        if (!results.job) {
          this.tableData = []
          return false
        } else job = results.job
        this.tableData = [
          {
            type: 'Map',
            progress: job.mapProgress,
            total: job.mapsTotal,
            complete: job.mapsCompleted
          }, {
            type: 'Reduce',
            progress: job.reduceProgress,
            total: job.reducesTotal,
            complete: job.reducesCompleted,
          }
        ]
      },
      getTableData2(results = {}){
        let job;
        if (!results.job) {
          this.tableData = []
          return false
        }
        else job = results.job
        this.tableData2 = [
          {
            type: 'Maps',
            newkey:job.newMapAttempts,
            running:job.mapsRunning,

            failed: job.failedMapAttempts,
            killed: job.killedMapAttempts,
            successful: job.successfulMapAttempts
          }, {
            type: 'Reduces',
            newkey:job.newReduceAttempts,
            running:job.reducesRunning,
            failed: job.failedReduceAttempts,
            killed: job.killedReduceAttempts,
            successful: job.successfulReduceAttempts
          }
        ]
      },
      getHistoryHttp(){
        //请求YARN APP页面
        this.application_id = this.query.application_id;
        let application_id = this.application_id
        let body = {application_id}
        dao.getMrJobInfo(body).then((res) => {
          if (res.FX.err) return false;
          let results = res.body.results || {}
          this.job = results.job || {}
          this.getApplicationMaster(results)
          this.getTableData(results)
          this.getTableData2(results)
        });
      },
      getRunHistoryHttp(){
        //请求YARN APP页面
        this.application_id = this.query.application_id;
        let application_id = this.application_id
        let job_id = this.query.job_id;
        let body = {application_id, job_id}
        dao.getApplicationJobInfoDetail(body).then((res) => {
          if (res.FX.err) return false;
          let results = res.body.results || {}
          if (results.state != "RUNNING") {
            this.state = results.state || ''
            this.toPage = "page334"
            this.getHistoryHttp()
            return false
          }

          this.state ='RUNNING';
          this.toPage = "page339"
          this.job = results.job || {}
          this.getApplicationMaster(results)
          this.getTableData(results)
          this.getTableData2(results)
        });
      }
    },
    mounted: function () {
      this.query = this.$store.state.route.query || {};
      if (this.query.state == 'RUNNING') this.getRunHistoryHttp();
      else this.getHistoryHttp();
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 10px;
  }

  .one {
    display: inline-block;
    width: 49%;
  }

  .right {
    text-align: right;
  }

  .el-card__heade {
    padding: 7px 20px;
  }

</style>